/**
 * 雷达监测状态
 */

import { message, Modal, Tag } from "antd";
import { FC, useEffect, useState } from "react";
import { getKshRadarStatus, IKshRadarStatus } from "../../api";
import { ItemBox } from "../../style";

const RadarStatus: FC<{
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  liaocangId?: React.Key; // 料仓id
}> = ({ open, setOpen, liaocangId }) => {
  const [detailsData, setDetailsData] = useState<IKshRadarStatus>();
  useEffect(() => {
    if (liaocangId) {
      (async () => {
        const { code, msg, data } = (await getKshRadarStatus({
          id: liaocangId,
        })) as {
          code: number;
          msg: string;
          data: IKshRadarStatus;
        };
        if (code === 20000) {
          setDetailsData(data);
        } else {
          message.error(msg);
        }
      })();
    }
  }, [liaocangId, open]);
  return (
    <Modal
      title="雷达监测状态"
      closable={{ "aria-label": "Custom Close Button" }}
      open={open}
      width="40rem"
      onCancel={() => {
        setOpen(false);
      }}
      footer={null}
    >
      <ItemBox>
        <div>篷布检查状态：</div>
        {detailsData?.tarpaulinStatus === 0 ? (
          <Tag color="green">正常</Tag>
        ) : (
          <Tag color="red">异常</Tag>
        )}
      </ItemBox>
      <ItemBox>
        <div>底留煤检查状态：</div>
        {detailsData?.coalStatus === 0 ? (
          <Tag color="green">正常</Tag>
        ) : (
          <Tag color="red">异常</Tag>
        )}
      </ItemBox>
      <ItemBox>
        <div>加强筋检测状态：</div>
        {detailsData?.reinforcementStatus === 0 ? (
          <Tag color="green">有</Tag>
        ) : (
          <Tag color="red">无</Tag>
        )}
      </ItemBox>
    </Modal>
  );
};

export default RadarStatus;
